{% extends 'base.html' %}
{% load static %}

{% block css %}
    <link href="{% static 'jquery-autosuggest/css/autoSuggest.css' %}" type="text/css" media="all" rel="stylesheet"/>
    <link href="{% static 'jquery-autosuggest/css/autoSuggest-grappelli.css' %}" type="text/css" media="all" rel="stylesheet"/>

{% endblock %}

{% block content %}
    <div class="py-4" style="background-color: #1c1c39;">
        <div class="container" style="margin-top: 50px; justify-content: center; display: -webkit-flex;">
            <div class="row" style="width: 760px">

                <!-- 发布文章开始 -->
                <form id="moodForm" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="box shadow-sm border rounded bg-white mb-3 ">
                        <div>
                            <div class="nav-link active">
                                <i class="feather-edit"></i> Share an article

                            </div>
                        </div>

                        {% for field in form %}

                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                     aria-labelledby="home-tab">
                                    <div class="p-3 d-flex align-items-center w-100 min-vh-15">
                                        <div class="w-100 " style="">
                                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                            {{ field }}
                                            {{ form.media }} <!-- 加这一句就可以上传图片了 -->


                                            <span class="error-msg">{{ field.errors.0 }}</span>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        {% endfor %}


                        <div class="border-top p-3 d-flex align-items-center">

                            <div class="mr-auto">
                                <!--上传图片-->


                            </div>

                            <div class="flex-shrink-1">
                                {% for field in intro_form %}
                                    {% if field.name == 'is_public' %}
                                        <button type="button" class="btn btn-light btn-sm">
                                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                            {{ field }}</button>
                                    {% endif %}

                                    {% if field.name == 'pic' %}
                                        <!--
                                        <div class="btn btn-primary btn-sm">
                                            <div><i class="fa fa-upload" aria-hidden="true"></i>上传文件</div>
                                            <input type="file" multiple name="uploadFile" id="uploadFile">
                                        </div>
                                        -->
                                    {% endif %}
                                {% endfor %}
                                <button type="submit" class="btn btn-primary btn-sm"
                                        name="action-publish" value="action-publish" data-clicked-text="正在发布...">
                                    <i class="feather-send"></i> 提 交
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- 发布文章结束 -->

            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <!-- Include the Quill library -->
    <script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
    <script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    <script type="text/javascript" src="{% static 'jquery-autosuggest/js/jquery.autoSuggest.minified.js' %}"></script>



    <script type="text/javascript">
        $(".django-ckeditor-widget").removeAttr('style');

        // 页面框架加载完成之后自动执行函数
        $(function () {
            CKupdate();
        });

        //function CKupdate 用来处理CKEDITOR的值 没有此函数的话，form表单 post.serialize()里面获取不到 ckeditor提交的值
        function CKupdate() {
            for (instance in CKEDITOR.instances)
                // 更新数据到textarea
                // CKEDITOR.instances['id_text'].updateElement();
                CKEDITOR.instances[instance].updateElement();
        }


    </script>
{% endblock %}